<template>
    <div class="login">
        <div class="login-form">
            <h2 class="title">酒店管理系统CMS登录</h2>
            <a-form :model="state.user" :label-col="{span: 6}" :wrapper-col="{span: 16}" class="form">
                <a-form-item label="用户名">
                    <a-input v-model:value="state.user.username" />
                </a-form-item>
                <a-form-item label="密码">
                    <a-input v-model:value="state.user.password" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 16, offset: 6 }">
                    <a-button type="primary" @click="onSubmit" block class="submit">
                        登录
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
import { reactive } from 'vue'
import { getInstance } from "../utils/request.js";
import { message } from 'ant-design-vue';
import { useStore } from "vuex";
import { useRouter } from "vue-router"
export default {
    name: "login",
    setup(){
        const state = reactive({
            user: {
                username: "",
                password: ""
            }
        })
        const store = useStore();
        const router = useRouter();
        const onSubmit = async () => {
            if(state.user.username !== "" && state.user.password !== ""){
                let res = await getInstance().post("/user/login", state.user);
                if(res.code == 0){
                    localStorage.setItem("token", res.data)
                    store.dispatch("admin/setUser", state.user).then(() => {
                        router.push("/admin")
                    });
                }else{
                    message.error(res.msg || "登录错误")
                }
            }
        }
        return {
            state,
            onSubmit
        };
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/pages/login.scss";
</style>